<template>
    <div class="box-wapper">
        <div class="box-spine" :style="{height:scrollHeight+'px'}"></div>
        <div class="clearfix">
            <template v-for="(item,index) of articleList">
                <article-item :key="index" :article-item="item" :index="index+1-0"></article-item>
            </template>
        </div>
        <!-- <div class="box-more">加载更多</div> -->
    </div>
</template>

<script>
import service from '@/service';
// import charsleAside from '@/components/common/aside'
import articleItem from '@/components/common/list';
export default {
    // name: 'article',
    // props:['scrollHeight'],
    data() {
        return {
            articleList: [],
            userInfo: {},
            scrollHeight: 0
        }
    },
    created() {
        // this.getUserInfo();
        this.getArticleList();
    },
    methods: {
        async getUserInfo() {
            let result = await service.getUserInfo();
            if (result.success) {
                this.userInfo = result.data;
            }
        },
        async getArticleList() {
            let loading = document.getElementById('show-loading')
            loading.style.display = 'flex'
            let result = await service.getArticleItemList({
                page: 1,
                pageSize: 10,
                type_alias: 'article'
            });
            if (result.success) {
                this.articleList = result.data.pageList;
                var homeRight = document.querySelector('#mainbody');
                setTimeout(() => {
                    this.scrollHeight = homeRight.scrollHeight
                }, 60);
                loading.style.display = 'none'
            }
        }
    },
    components: {
        // charsleAside,
        articleItem
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box-spine {
  width: 0px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
  z-index: 1;
  border: dotted 1px #acb7c0;
}
.box-more {
  text-align: center;
  background: #fff;
}
</style>
